<template>
  <div class="chartcontent">
      <el-table 
          :data="tableData" 
          border
          style="width: 100%" 
          height="100%"
          v-loading=loading 
          :span-method="objectSpanMethod"
          class="box-table"
          :header-cell-style='headerStyle'
          :row-style='rowStyle'
          :cell-style="cellStyle">
            <el-table-column v-for="(key,index) in sourceKey" :key="index" :width="columnWidth(key)">
                <template slot="header">{{key_names[key]['name']}}</template>
                <template slot-scope="scope">
                  {{tableData[scope.$index][key]}}
                </template>
            </el-table-column>
           
        </el-table>
  </div>
</template>

<script>
// import LineChart from "./LineChart.vue";
import json_data from '../Utils/api.js';
let {localData,key_names } = json_data()
let sourceKey=["name","enddat","close","strike_price","final_price","year_yate","chajia","baozhengjin","canbuycount","iszhicheng"]

export default {
  name: "ChartUS",
  props: ['type'],
  data() {
    return {
      sourceKey:[],
      key_names:[],
      tableData: [],
      loading:true,
      headerStyle:{
          'font-weight':'bold',
          'font-size':'13px',
          'height':'70px',
          'color':'#333333',
          // 'background-color': '#f9aa09',
          'text-align':'center'
      },
      rowStyle:{
          'font-weight':'bold',
          'font-size':'12px',
          'height':'60px',
          'text-align':'center'
      },
      spanArr: [], // 一个空的数组，用于存放每一行记录的合并数
      pos: 0, // spanArr 的索引
      contentSpanArr: [],
      position: 0
    }
  },
  beforeMount() {
    this.spanArr = [];
    this.contentSpanArr = [];
    this.sourceKey = sourceKey;
    this.key_names = key_names;
    let key = this.type+'_table'
    console.log(key)
    var jsonO=localData[key]
    this.tableData=jsonO
    this.fetchTableData()
  },
  methods: {
    async fetchTableData () {
      this.loading = false
      this.spanMethod(this.tableData)
    },
    columnWidth(key){
      return this.key_names[key]['width']

    },
    objectSpanMethod({rowIndex, columnIndex }) {

      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
     
      return {
          rowspan: 1,
          colspan: 1
      };
    },
    spanMethod(data){
        // 设定一个数组spanArr/contentSpanArr来存放要合并的格数，同时还要设定一个变量pos/position来记录
      for (var i = 0; i < data.length; i++) {
         if (i === 0) {
          this.spanArr=[]
          this.contentSpanArr=[]
          this.spanArr.push(1);
          this.pos = 0;
          this.contentSpanArr.push(1);
          this.position = 0;
        } else {
          // 判断当前元素与上一个元素是否相同(第1列)
          let bankuai = data[i]['name'].split(':')[0]
          let last_bankuai = data[i-1]['name'].split(':')[0]
          if (bankuai === last_bankuai) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    cellStyle({rowIndex, columnIndex}) {//根据测试结果动态调整单元格样式，成功-绿色，失败-红色，不支持-黄色
  
      if (rowIndex>=0 ) {

          if (columnIndex ==5) {
              let net_mf_amount = this.tableData[rowIndex]["year_yate"]
              let net_mf_amount_n=Number(net_mf_amount.split('%')[0])
              if (net_mf_amount_n > 100 ) {
                  let aa ={
                      'color':"red",
                      'font-size':'12px',
                      'text-align':'center'
                  }
                  return aa
              }
              
          }
      }
      let aa ={
          'color': '#555555',
          'font-size':'12px',
          'text-align':'center'
      }
      return aa
      //              
    }  
  }
}
</script>

<style>

.chartcontent{
  /* padding: 5px; */
  width: 100%;
  height: 98%;
  background-color: rgb(209, 189, 230);
  
}

.el-table__cell{
  padding:  0px !important;
  border-right:0px  !important;
  border-left:0px  !important;
}
.el-table__row>td{
  /* border: none !important; */
  border-right:0px  !important;
  border-left:0px  !important;
}


.el-table--border{
    border-right:0px  !important;
    border-left:0px  !important;
}
    
.el-table--border{
  border-right:0px  !important;
}
</style>
